<template>
  <div>
    <!-- 卡片 -->
    <el-card>
      <div style="font-size:20px;margin-bottom:20px;">项目列表</div>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input placeholder="请输入项目名称" size="small" v-model="name" clearable @keyup.enter.native="getList(1)">
            <el-button slot="append" icon="el-icon-search" @click="getList(1)">搜索</el-button>
          </el-input>
        </el-col>
        <el-col :span="16">
          <el-button @click="add" size="small" v-if="role!='SUPER'">新建项目</el-button>
          <!-- <el-button @click="add" size="small" >新建项目</el-button> -->
        </el-col>
      </el-row>
      <!-- 用户列表区域 -->
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column prop="name" label="项目名称" width="150px" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="goName(scope.row.id)">{{scope.row.name}}</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="type" label="工程类别" show-overflow-tooltip></el-table-column>
        <!-- <el-table-column prop="mobile" label="建筑用途"></el-table-column> -->
        <el-table-column prop="unit" label="施工单位" show-overflow-tooltip></el-table-column>
        <el-table-column prop="builtArea" label="建筑面积(平方米)" show-overflow-tooltip></el-table-column>
        <el-table-column prop="engineeringCost" label="工程造价(万元)" show-overflow-tooltip></el-table-column>
        <el-table-column prop="contractDuration" label="合同工期(天)" show-overflow-tooltip></el-table-column>
        <el-table-column prop="beginDate" label="开工日期" show-overflow-tooltip></el-table-column>
        <el-table-column prop="endDate" label="竣工日期" show-overflow-tooltip></el-table-column>
        <el-table-column prop="appKey" label="监控APPKEY" show-overflow-tooltip></el-table-column>
        <el-table-column prop="appSecret" label="监控APPSECRET" show-overflow-tooltip></el-table-column>
        <el-table-column prop="adddress" label="地理位置" show-overflow-tooltip></el-table-column>
        <el-table-column label="操作" width="120px">
          <template slot-scope="scope">
            <!-- 编辑按钮 -->
            <el-button type="text" size="mini" @click="update(scope.row)" v-if="role!='SUPER'" >编辑</el-button>
            <!-- <el-button type="text" size="mini" @click="update(scope.row)"  >编辑</el-button> -->
            <!-- 查看按钮 -->
            <el-button type="text" size="mini" @click="detail(scope.row.id)">查看</el-button>
            <el-button type="text" size="mini" @click="deleteItem(scope.row.id)" v-if="role!='SUPER'">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </el-card>
    <!-- 查看弹框区域 -->
    <el-dialog title="项目详情" :visible.sync="dialogTableVisible" width="80%">
      <!-- 弹框主体内容 -->

      <div class="con_dialog">
        <div style="float:left">
        <h4>项目信息</h4>
        <p>项目名称：{{particularsList.name}}</p>
        <p>工程类别：{{particularsList.type}}</p>
        <!-- <p>建筑用途：{{}}</p> -->
        <p>建筑面积：{{particularsList.builtArea}}平方米</p>
        <p>工程造价：{{particularsList.engineeringCost}}万</p>
        <p>合同工期：{{particularsList.contractDuration}}天</p>
        <p>开工日期：{{particularsList.beginDate}}</p>
        <p>竣工日期：{{particularsList.endDate}}</p>
        <p>监控APPKEY：{{particularsList.appKey}}</p>
        <p>监控APPSECRET：{{particularsList.appSecret}}</p>
        <h4>项目团队</h4>
        <p>施工单位：{{particularsList.unit}}</p>
        <p>负责人：{{particularsList.unitPerson}}</p>
        <div style="display:flex;justify-content:space-between;">
          <div>
        <p>平面图：</p>
         <el-image 
         v-if="particularsList.planarGraph"
            class="img"
            :src="particularsList.planarGraph"
            :preview-src-list="[particularsList.planarGraph]">
          </el-image>
          </div>
          <div>
          <p>效果图：</p>
         <el-image 
         v-if="particularsList.rendering"
            class="img"
            :src="particularsList.rendering"
            :preview-src-list="[particularsList.rendering]">
          </el-image>
          </div>
          </div>
        </div>
        <div style="float:right">
          <h4>项目地址</h4>
          <div class="mapbox" id="map"></div>
          <p>地理位置：{{particularsList.adddress}}</p>
        </div>
        <!-- <p class="time_span">项目创建时间：{{particularsList.time}}</p> -->
      </div>
    </el-dialog>
  </div>
</template>

<script>
import base from "../api/base"
export default {
  data() {
    return {
      role:localStorage.getItem('role'),
      name:'',
      tableData: [],
      //   分页
      currentPage: 1,
      pageSize:10,
      total:0,
      dialogTableVisible: false, // 弹框是否显示
      particularsList: [] //详情数据
    };
  },
  methods: {
    deleteItem(id){
      this.$confirm('此操作将删除此用户信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$api.loginhome.delPro(id).then(res => {
              if(res.success) {
                  this.$message.success('删除成功')
                  this.getList()
              } else {
                  this.$message.error(res.message)
              }
          })
        })
    },
    //分页
    handleSizeChange(val) {
      this.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.getList()
    },
    //新增
    add() {
      this.$router.push("/add");
    },
    // 修改跳转
    update(row) {
        this.$router.push({name:'add',params:{row}})
    },
    goName(row) {
      let token = window.localStorage.getItem("token")
      window.location.href = `${base.spurl}/ncpr-lv/index?id=${row}&token=${token}&path=mainhome`
    },
    //查看查看详情
    detail(id) {
      this.dialogTableVisible = true;
      // 查看详情接口
      this.$api.loginhome.particulars({ id: id }).then(res => {
        res.data.time = this.format(res.data.time)
        this.particularsList = res.data;
        if(this.particularsList.planarGraph){
            this.particularsList.planarGraph = `${base.download}${this.particularsList.planarGraph}`
        }else{
          this.particularsList.planarGraph = ""
        }

         if(this.particularsList.rendering){
            this.particularsList.rendering = `${base.download}${this.particularsList.rendering}`
        }else{

          this.particularsList.rendering = ""
        }
       
     


        this.$nextTick(function() {
          // let that = this
          var map = new BMap.Map("map");
          // 初始化地图,设置中心点坐标，
          // var point = new BMap.Point(121.160724, 31.173277); // 创建点坐标
          map.centerAndZoom('柳州', 15);
          map.enableScrollWheelZoom();
          map.clearOverlays(); //清除地图上所有覆盖物
          var new_point = new BMap.Point(this.particularsList.lng,this.particularsList.lat);
          var marker = new BMap.Marker(new_point);  // 创建标注
          map.addOverlay(marker);              // 将标注添加到地图中
          map.panTo(new_point); 
        });
      })
    },
    add0(m){return m<10?'0'+m:m },
    format(val){
      var time = new Date(val);
      var y = time.getFullYear();
      var m = time.getMonth()+1;
      var d = time.getDate();
      var h = time.getHours();
      var mm = time.getMinutes();
      var s = time.getSeconds();
      return y+'-'+this.add0(m)+'-'+this.add0(d);
    },
    //刷新列表
    getList(val) {
      if(val) {
        this.currentPage = 1
      }
      let params = {
        name: this.name,
        start: this.currentPage - 1,
        pageSize: this.pageSize
      }
      this.$api.loginhome.find(params)
      .then(res => {
        this.tableData = res.data;
        this.total = res.recordsTotal
      })
      .catch(() => {
      });
    },
  },
  created() {
    this.getList();
  }
};
</script>

<style scoped>
.el-pagination {
  padding-top: 20px;
  text-align: right;
}
/deep/.el-table th,
.el-table tr {
  background: #e4e4e4;
}
/deep/.el-table thead {
  color: #7a7c80;
}
/deep/.el-input-group__append button.el-button {
  background-color: #409eff;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  height: 32px;
}
/deep/.el-input-group__append .el-button {
  padding: 10px 20px;
}
/deep/.el-input-group__append,
.el-input-group__prepend {
  color: #ffffff;
}
/deep/.el-table td,
.el-table th {
  text-align: center;
}
/deep/.el-table th > .cell {
  text-align: center;
}
/deep/.el-col-16 {
  text-align: right;
}
/deep/.el-dialog__body {
  margin: -35px 0px;
}
.con_dialog {
  height:70vh;
  display: flex;
  justify-content: space-around;
}
.con_dialog h4 {
  margin: 7px 0px 7px 30px;
}
.con_dialog p {
  margin: 7px 0px 7px 60px;
  font-size: 12px;
}
.mapbox {
  width: 500px;
  height: 320px;
  background: gainsboro;
  margin: 10px 0px 7px 60px;
}
.time_span {
  text-align: right;
  padding: 10px 48px 10px 10px;
}
.img{
  width:140px;
  height:140px;
  margin: 7px 0px 7px 60px;
}
</style>
